<!--
 * @Descripttion:
 * @Author: Silence
 * @Date: 2023-05-27 20:34:25
 * @LastEditors: Silence
 * @LastEditTime: 2023-05-27 21:33:01
-->
<template>
  <div class="home">
    <div class="content">
      <router-view></router-view>
    </div>
    <div class="foot">
      <ul>
        <li><RouterLink to="/first">首页</RouterLink></li>
        <li><RouterLink to="/find">找房</RouterLink></li>
        <li><RouterLink to="/info">资讯</RouterLink></li>
        <li><RouterLink to="/my">我的</RouterLink></li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {

    }
  },
  created () {
  },
  beforeRouteUpdate (to, from, next) {
    console.log('beforeRouteUpdate')
    return next()
  },
  computed: {
  },
  methods: {
  }
}
</script>
<style lang='less'  scoped>
.home {
  height: 100vh;
  display: flex;
  flex-direction: column;
  .content {
    flex: 1;
    overflow: auto;
  }
  .foot {
    height: 50px;
    background-color: #fff;
    ul {
      display: flex;
      list-style: none;
      height: 100%;
      li {
        flex: 1;
        a {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 100%;
          margin: 0 10px;
          text-decoration: none;
        }
        .router-link-exact-active,
        .router-link-active {
          background-color: red;
        }
      }
    }
  }
}
</style>
